<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>transform3D</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			body {
				background-color: black;
			}

			.box {
				/*
					转换样式: preserve-3d可以看到子元素的3d效果;
					默认值flat: 2d;
				*/
				transform-style: preserve-3d;
				width: 200px;
				height: 200px;
				/*background-color: pink;*/
				/* 左右居中 */
				margin: 200px auto 0;

				position: relative;

				transform: rotateY(45deg) rotateX(-45deg);

				transition: 2s;
			}

			.box:hover {
				transform: rotateX(160deg) rotateY(260deg);
 			}

			.box>div {
				width: 200px;
				height: 200px;
				font-size: 100px;
				/* 字体加粗 */
				font-weight: bolder;
				/* 字体左右居中 */
				text-align: center;
				/* 设置行高 */
				line-height: 200px;
				color: purple;
				/* 透明度 */
				opacity: 0.8; 

				/* 绝对定位 */
				position: absolute;


				/*
					背面可见性
				*/
				/*backface-visibility: hidden;*/
			}
			
			/* 前面 */
			.front {
				background-color: red;
				/* 
					translateX 沿着x轴方向平移(右是正方向)
					translateY 沿着y轴方向平移(下是正方向)
					translateZ 沿着z轴方向平移(前是正方向)
				 */
				/*transform: translateZ(100px);*/
				/*transform: translateX(200px) translateY(-200px);*/

				/* 
					translate3d: 3d平移;
					第一个值: x方向的平移量;
					第二个值: y方向的平移量;
					第三个值: z方向的平移量;

				 */
				/*transform: translate3d(200px, 200px, 0);*/

				transform: translateZ(100px);
			}
			
			/*
				scaleX x轴方向的放大倍数
				scaleY y轴方向的放大倍数
				scale(2) x和y轴同时放大2倍
				scale(2, 3) x轴放大2倍, y轴放大3倍
			*/
			.front:hover {
				/*transform: translateZ(200px) scaleX(5);*/
			}

			/* 后面 */
			.behind {
				background-color: orange;

				transform: translateZ(-100px) rotateY(180deg);
			}

			/* 上面 */
			.up {
				background-color: yellow;

				/* 
					第一个值: 是否绕x旋转;
					第二个值: 是否绕y旋转;
					第三个值: 是否绕z旋转;
					第四个值: 旋转度数;

				 */
				transform: rotate3d(1, 0, 0, 90deg) translateZ(100px);
			}

			/* 下面 */
			.down {
				background-color: white;
				transform: rotateX(-90deg) translateZ(100px);
			}

			/* 左面 */
			.left {
				background-color: blue;
				transform: rotateY(90deg) translateZ(100px);
			}
			
			/* 右面 */
			.right {
				background-color: green;
				transform: rotateY(-90deg) translateZ(100px);
			}





		</style>
	</head>
	<body>

		<div class="box">
			<div class="front">1</div>
			<div class="behind">2</div>
			<div class="left">3</div>
			<div class="right">4</div>
			<div class="up">5</div>
			<div class="down">6</div>
		</div>

		
	</body>
</html>